import React from 'react'

// 引入底部导航
import Tabbar from '@/components/common/Tabbar'

const Index = () =>
{
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    const [searchParams] = React.$Router.useSearchParams()

    const [action,setAction] = React.useState(searchParams.get('action'))

    const location = React.$Router.useLocation()

    const [home,setHome] = React.useState('')

    let data = []

    React.useEffect(() => {

        const name = location.state ? location.state.name : ''

        setHome(name)
        
    },[])

    const [list,setList] = React.useState([])

    const [finished,setFinished] = React.useState(false)

    // 定义分页的值，可以每次拿到最新
    let page = React.useRef(1)

    const listRef = React.useRef(null)

    /**
     * 上拉刷新
    */
    const load = async () =>
    {
        setFinished(true)
        ProductData()
    }

    /**
     * 下拉刷新
    */
    const Refresh = async () =>
    {
        data = []
        setList([])
        page.current = 1
        setFinished(false)

        return new Promise((resolve) => {
            setTimeout(() => {
                ProductData()
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000);
        })
    }

    /**
     * 获取数据
    */
    const ProductData = async () =>
    {
        let result = await React.$Api.ProductIndex({page:page.current})

        if(result)
        {
            if(result.code === 1)
            {
                data = data.concat(result.data)

                setList(data)

                page.current = page.current + 1
                
                setTimeout(() => {
                    setFinished(false)
                    
                }, 100)

            }else{
                React.$Vant.Toast.info(result.msg)
                setFinished(true)
                return false
            }
        }
    }

    const Selected = (item,e) =>
    {

        React.$Cookies.remove('product')

        React.$Cookies.save('product',item)

        navigate('/lease/lease/add')
    }

    /**
     * 列表
    */
    const Items = () =>
    {
        if(action === 'add')
        {
            // 说明从下单那边过来的
            return list.map((item,index) => {
                return (
                    <li key={index}>
                        <a onClick={(e) => Selected(item,e)}>
                            <img src={item.cover_cdn} alt="" />
                            <p>{item.name}</p>
                            <span>{item.rent_price}</span>
                        </a>
                    </li>
                )
            })
        }else{
            // 说明不是从下单那边过来
            return list.map((item,index) => {
                return (
                    <li key={index}>
                        <React.$Router.NavLink to={`/product/product/info?pid=${item.id}`}>
                            <img src={item.cover_cdn} alt="" />
                            <p>{item.name}</p>
                            <span>{item.rent_price}</span>
                        </React.$Router.NavLink>
                    </li>
                )
            })
        }
    }


    /**
     * 返回上一个页面
    */
    const onBack = () =>
    {
        navigate(-1)
    }

    /**
     * 导航组件
    */
    const Nav = () =>
    {
        if(home == 'home' || action == 'add')
        {
            return (
                <>
                    {/* 导航栏 */}
                    <React.$Vant.Sticky>
                        <React.$Vant.NavBar 
                            title='商品大全'
                            onClickLeft={onBack}
                        />
                    </React.$Vant.Sticky>
                </>
            )
        }else{
            return (
                <>
                    {/* 导航栏 */}
                <React.$Vant.Sticky>
                    <React.$Vant.NavBar 
                        title='商品大全'
                        leftArrow={<></>}
                    />
                </React.$Vant.Sticky>
                </>
            )
        }
    }

    /**
     * 底部导航
    */
    const Tab = () =>
    {
        if(home !== 'home')
        {
            return (
                <Tabbar />
            )
        }
    }

    return (
        <>
            {/* 导航 */}
            <Nav />

            {/* 列表 */}
            <React.$Vant.PullRefresh onRefresh={Refresh} onRefreshEnd={() => listRef.current?.check()}>
                <React.$Vant.List ref={listRef} onLoad={load} offset={5} finished={finished}>
                    <div className="left_kuangs">
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>

            {/* 占位 */}
            <div style={{height:".75rem"}}></div>

            {/* 底部导航 */}
            <Tab />
        </>
    )
}

export default Index